<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <style>
            .gpu { 
                -webkit-transform:translateZ(0);
            }            
            .semitransparent { 
                opacity:0.25; 
                position: absolute;
            }
            .transform {
                -webkit-transform-origin: 0px 0px; 
                -webkit-transform: matrix(1, 0, 0, 1, 0, 0); 
            }
            .info {
                color: white;
                font-family: sans-serif;
                -webkit-transform:translateZ(0); 
            }
        </style>
    </head>
<body>
    <div id="container" class="transform"></div>
    <p class="info">Move mouse or change window size. There should be only one shade of gray on the screen.</p>
    <script>
    'use strict';
    // -- aux
    String.prototype.format = function() {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function(match, number) { 
            return typeof args[number] != 'undefined' ? args[number] : match;
        });
    };     
    var query = function(a) {
        var r = {}, i, p = {};
        for (i = 0; i < a.length; ++i) {
            p = a[i].split('=');
            r[p[0]] = p.length == 2 ? decodeURIComponent(p[1].replace(/\+/g, " ")) : null;
        }
        return r;
    };
    query = query(window.location.search.substr(1).split('&'));
    
    var add_images = function($container, type, size) {
        size = size || {};
        size.x = size.x || 24;
        size.y = size.y || 16;
        var x, y, $img;            
        for(x=0; x < size.x; ++x) {
            for(y=0; y < size.y; ++y) {
                $img = $('<img>').attr('src', 'black.png')
                                 .attr('class', 'semitransparent')
                                 .css('left', '{0}px'.format(x*256))
                                 .css('top',  '{0}px'.format(y*256));                                 
                if ('gpu' in query)
                {
                    $img.addClass('gpu');
                }
                $container.append($img);
            }
        }    
    };
    
    // test, emulates map movement in Google Maps API 3.9+ (-webkit-transform:matrix(...) on 
    // overlay layer container + -webkit-transform:translateZ(0) on child elements of the container,
    // e.g. tiles)
    $(function() {
        var $container = $('#container');
        var size = {x: 24, y: 16};
        
        var add_multiple_layers = function() {
            $container.empty();
            var layers = 8;
            for(var i = 0; i < layers; ++i) { 
                add_images($container, size);
            }
        }
        
        var current_x = 0, current_y = 0;
        $(document.body).mousemove(function(e){
            if (current_x != e.pageX || current_y != e.pageY) {
                current_x = e.pageX; current_y = e.pageY;
                $container.css('-webkit-transform', 
                               'matrix(1, 0, 0, 1, {0}, {1})'.format(e.pageX-256*size.x/2, 
                                                                     e.pageY-256*size.y/2) );
            }
        });
        
        $container.css('-webkit-transform', 
                       'matrix(1, 0, 0, 1, {0}, {1})'.format(screen.width/2 - 256*size.x/2, 
                                                             screen.height/2 - 256*size.y/2) );
        add_multiple_layers($container);
    });
    </script>
</body>
</html>